<!DOCTYPE html>
<html lang="en">
<head>
	<title>Nokia Mobile Web Components</title>
	<meta charset="utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="author" content="">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="shortcut icon" href="resources/images/favicon.ico" />
	<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
	<script src="resources/scripts/nokia.mwc-1.0.js"></script>
	<script>
		function init() {
			var main_menu = SlidingDrawer({"id":"top"});
			
			var options = {
				"id":"scroll-demo",
				"height": 320,
				"border": true
			};
			var scrollables = new Scrollable(options);
			
		}
		
		addEvent(window, "load",init);
	</script>
	<style>
		#scrolltitle {
			top: 0px;
			left: 0px;
		
		}
		#blacktrain {
			top: 80px;
			left: 50px;
		}
		#redtrain {
			top: 450px;
			left: 500px;
		}
		#tourists {
			top: 300px;
			left: 1200px;	
		}
	</style>
</head>
<body>
	<header id="top" class="sliding-drawer">
		<img src="resources/images/component.png" alt="component" />
		<h1>Mobile Web Components</h1>
		<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
		<nav>
			<ul>
				<li><a href="index.html">Overview</a></li>
				<li><a href="collapsible.html">Collapsible</a></li>
				<li><a href="scrollable.html">Scrollable</a></li>
				<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
				<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
				<li><a href="slideshow.html">Slideshow</a></li>
				<li><a href="miscellaneous.html">Miscellaneous</a></li>
			</ul>
		</nav>
	</header>
	<!-- 
	  -- Scroller Component
	  -- usage: addEvent(event, function);
	  -- note: only targets window events!
	  --
	-->
	<header>
		<h2>Scrollable</h2>
		<p>Enables users to interact with a large piece of static content without having to zoom in or out.</p>
	</header>
	<figure>
  		<img src="resources/images/headers/flickr-bracketing_life-4215944196.jpg" />
		<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/bracketing_life/4215944196" title="Scrolls">Bracketing Life</a>.</figcaption>
	</figure>
	
	<nav id="contents">
		<h4>Contents</h4>
		<ol>
			<li><a href="#intro">Introduction</a></li>
			<li><a href="#usage">General Usage</a></li>
			<li><a href="#properties">Properties & Functions</a></li>
			<li><a href="#demo">Demo: Scrollable </a></li>
		</ol>
	</nav>

	<h3 id="intro">Introduction</h3>
	<p>The scrollable component enables users to interact with content that is much larger than their display, without the need to zoom in and out. Content such as maps, landscape layouts and long lists or tables are ideal to display within a this component. It's also possible to overlay elements on top of the scrollable content in order to create labels or points-of-interest.</p>
	<h3 id="usage">General Usage</h3>
	<p>The scrollable component is based on a simple <code>&lt;div&gt;</code> to which a &quot;scrollable&quot; class has been applied. As with all components, an id is required to reference and create the component.</p>
	<p>The content the user will scroll through should be placed within the <code>&lt;div&gt;</code> element. Note that the <code>&lt;div&gt;</code> could be substituted for an <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code> or other suitable element, so long as the &quot;scrollable&quot; class is applied to it.</p>
	<p>If you wish to provide an overlay, simply add a <code>&lt;ul&gt;</code> element with the class &quot;overlay&quot; after your content.</p>
	<p><strong>All other elements such as navigation, buttons, and a viewport frame will be added automatically when the component is created.</strong></p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code class="html">
<h4>HTML</h4>
<pre>
&lt;!-- container + overlay --&gt;
&lt;div id=&quot;scroll_me&quot; class=&quot;scrollable&quot;&gt;
  &lt;!-- content --/&gt;
  ...
  &lt;ul class=&quot;overlay&quot;&gt;
    &lt;li id="a"&gt;&lt;!-- content --&gt;&lt;/li&gt;
    &lt;li id="b"&gt;&lt;!-- content --&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
&lt;/div&gt;
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<h4>Positioning the optional overlays</h4>
	<p>To position the overlay elements, you will need to add a small amount of additional CSS to the document head (using an inline <code>&lt;style&gt;</code> declaration). These styles will define each overlay element's positions, starting from the top left corner of the content.</p>
	<!-- *PRE-FORMATTED CODE SNIPPET -->
<code class="css">
<h4>CSS</h4>
<pre>
/* overlay positioning */
#a { top:10px;left:100px }
#b { top:50px;left: 80px }
...
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>Once the overlay's structure and styles have been defined, all that's left is to define the overlay itself using JavaScript.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code class="javascript">
<h4>JavaScript</h4>
<pre>
var options = {
  "id":"scroll_me",
  "height": 320,
  "border": true
};
var scroll_me = new Scrollable(options);
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>You can define the component options, using the JavaScript shown above. These include the id of the component's DOM element and an optional component height. If no height option is specified a default height value of 300 pixels will be used.</p>
	<p><strong>Note:</strong> Although this component is flexible, it has not been optimised to work on large screens such as PCs and tablets. The component currently works best when used on screens between 320 and 640 pixels in width.</p>
	<h3 id="properties">Properties & Functions</h3>
		<table>
			<tr><td>id</td><td>#id of DOM element</td></tr>
			<tr><td>busy</td><td>true when scrolling</td></tr>
			<tr><td>height</td><td>number (300px default)</td></tr>
			<tr><td>border</td><td>true | false (default) </td></tr>
			<tr><td>scroll(direction)</td><td>"up", "down", "left" or "right"</td></tr>
			<tr><td>update()</td><td>performs scroll</td></tr>
			<tr><td>adjust()</td><td>adjust nav item visibility</td></tr>
		</table>
	<h3 id="demo">Demo</h3>
	<p>Navigate the scrolling area using the corresponding arrow buttons.</p>
	<div id="scroll-demo" class="scrollable">
		<img src="resources/images/scroll-flickr-hdn-5628133851.jpg" />
		<ul class="overlay">
			<li id="scrolltitle" ><a href="http://www.flickr.com/photos/hdn/5628133851/">Panorama cottbus by H.-D.N. on Flickr</a></li>
			<li id="blacktrain" ><a href="http://nokia.mobi">a black train</a></li>
			<li id="redtrain"><a href="http://nokia.mobi">a red train</a></li>
			<li id="tourists"><a href="http://nokia.mobi">some tourists</a></li>
		</ul>
	</div>
	<p><strong>Tip:</strong> The checked border around the map is created using the CSS <a href="http://www.css3.info/preview/border-image/">border-image</a> property and can be applied by setting the border option to &quot;true&quot; when creating the component. On devices where border-image is not supported, the checked border should degrade gracefully, rendering as a simple 1 pixel border. Note however that browsers may not have the full border-image spec implemented, so testing is highly recommended.</p>
	<nav><a href="#top" class="top">back to top</a></nav>
	<footer>
		<nav>
			<ul>
				<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
				<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
			</ul>
		</nav>
		<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
	</footer>
</body>
</html>

